<template>
	<div class="login-container">
		<el-tabs class="login-form" style="color: white;" v-model="activeName">
			<el-tab-pane label="密码登录" name="first">
				<el-form ref="loginForm" :model="loginForm" :rules="loginRules" auto-complete="on" label-position="left">
					<el-form-item prop="loginName">
						<span class="svg-container"><i class="iconfont icon-jiaose1"></i></span>
						<el-input v-model="loginForm.loginName" name="loginName" type="text" auto-complete="on" placeholder="请输入登录名或手机号" />
					</el-form-item>
					<el-form-item prop="password">
						<span class="svg-container"><i class="el-icon-lock"></i></span>
						<el-input :type="pwdType" v-model="loginForm.password" name="password" auto-complete="on" placeholder="请输入密码"
						 @keyup.enter.native="handleLogin" />
						<span class="show-pwd" @click="showPwd"><i class="el-icon-view"></i></span>
					</el-form-item>
					<!-- <el-form-item prop="password">
						<slider-verification></slider-verification>
					</el-form-item> -->
					<!-- <el-form-item prop="code" style="width: 70%;position: relative;">
							<span class="svg-container"><i class="el-icon-edit"></i></span>
							<el-input v-model="loginForm.code" name="code" placeholder="请输入验证码" style="width: 50%;"></el-input>
							<img :src="loginForm.image" style="width: 110px;height: 100%;position: absolute;left: 110%;" @click="get_randomcode_gif"/>
					</el-form-item> -->
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item>
								<el-button :loading="loading" type="info" style="width:100%;" @click.native.prevent="chooseRegType(2)">注册</el-button>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item>
								<el-button :loading="loading" type="primary" style="width:100%;" @click.native.prevent="click_login">登录</el-button>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span=12>
							<el-checkbox v-model="checkedPass.loginV1">记住账号密码</el-checkbox>
						</el-col>
						<el-col :span=12>
							<el-button type="text" @click="forgetPwd" style="float:right" class="assistance_color">忘记密码<i class="el-icon-d-arrow-right"></i></el-button>
						</el-col>
					</el-row>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="验证码登录" name="second">
				<el-form ref="phoneForm" :model="phoneForm" :rules="loginRules2" auto-complete="on" label-position="left">
					<el-form-item prop="phone">
						<span class="svg-container"><i class="iconfont icon-jiaose1"></i></span>
						<el-input v-model="phoneForm.phone" name="phone" type="text" auto-complete="on" placeholder="请输入手机号" />
					</el-form-item>
					<el-form-item prop="vercode" style="width: 70%;position: relative;">
						<span class="svg-container"><i class="el-icon-edit"></i></span>
						<el-input v-model="phoneForm.vercode" name="vercode" placeholder="请输入验证码" style="width: 50%;"></el-input>
						<el-button v-if="vertificationcode_num=='发送验证码'" type="primary" plain style="width: 35%;height: 100%;position: absolute;left: 107%;"
						 @click="getVercode">{{vertificationcode_num}}</el-button>
						<el-button v-else type="primary" plain style="width: 35%;height: 100%;position: absolute;left: 107%;">{{vertificationcode_num}}秒后获取</el-button>
					</el-form-item>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item>
								<el-button :loading="loading" type="info" style="width:100%;" @click.native.prevent="chooseRegType(2)">注册</el-button>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item>
								<el-button :loading="loading" type="primary" style="width:100%;" @click.native.prevent="click_login">登录</el-button>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-button type="text" @click="forgetPwd" style="float:right" class="assistance_color">忘记密码<i class="el-icon-d-arrow-right"></i></el-button>
						</el-col>
					</el-row>
				</el-form>
			</el-tab-pane>
		</el-tabs>
		<el-dialog title="提示" :visible.sync="verification.dialogVisible" width="450px">
			<slide-verify  ref="mySlideVerify" :l="42" :r="10" :w="400" :h="205" @success="onSuccess" @fail="onFail" @refresh="onRefresh"
			 :slider-text="verification.text"></slide-verify>
		</el-dialog>

	</div>
</template>

<script>
	//非父子组件传值
	import bus from '../../../static/js/bus.js'
	// https://blog.csdn.net/monoplasty/article/details/85016089#_2
	import SlideVerify from 'vue-monoplasty-slide-verify/src/lib/slide-verify.vue';
	import {
		mapActions,
		mapGetters
	} from 'vuex';
	export default {
		name: 'Login',
		components: {
			SlideVerify
		},
		computed: {
			...mapGetters(['userInfo', 'api']) //获取
		},
		data() {
			const validateUsername = (rule, value, callback) => {
				if (value.length == 0) {
					callback(new Error('登录名为必填项'));
				} else {
					callback();
				}
			};
			const validatePass = (rule, value, callback) => {
				if (value.length ==0) {
				  callback(new Error('密码为必填项'))
				} else {
				  callback()
				}
			};
			const validateCode = (rule, value, callback) => {
				if (value.length == 0) {
					callback(new Error('请输入验证码'));
				} else {
					callback();
				}
			};
			const validatePhone = (rule, value, callback) => {
				if (value.length == 0) {
					callback(new Error("手机号为必填项"))
				} else {
					callback();
				}
			};
			const validateVerCode = (rule, value, callback) => {
				if (value.length == 0) {
					callback(new Error('验证码为必填项'));
				} else {
					callback();
				}
			};
			return {
				activeName: 'first',
				loginForm: { //登录名登录
					loginName: '',
					password: '',
					code: '',
					codeId: '',
					image: '',
				},
				loginRules: {
					loginName: [{
						required: true,
						trigger: 'blur',
						validator: validateUsername
					}],
					password: [{
						required: true,
						trigger: 'blur',
						validator: validatePass
					}],
					code: [{
						required: true,
						trigger: 'blur',
						validator: validateCode
					}]
				},
				phoneForm: { //手机号码
					phone: '',
					vercode: ''
				},
				loginRules2: {
					phone: [{
						required: true,
						trigger: 'blur',
						validator: validatePhone
					}],
					vercode: [{
						required: true,
						trigger: 'blur',
						validator: validateVerCode
					}]
				},
				vertificationcode_num: '发送验证码',
				loading: false, //登录时的雪花转
				pwdType: 'password',
				redirect: undefined,
				checkedPass: { //记住账号密码
					loginV1: false,
				},
				verificationOnoff: false, //滑块验证
				//滑块验证
				verification: {
					text: '向右滑',
					dialogVisible:false,//弹出框
					isVer:false,//是否验证通过
				}

			};
		},
		watch: {
			$route: {
				handler: function(route) {
					console.log(route);
					this.redirect = route.query && route.query.redirect;
					//获取量子加密的url
					this.get_qss()
				},

			},
			'checkedPass.loginV1'(newData) {
				console.log(newData)
				if (newData) {
					localStorage.setItem('loginV1Onoff', true)
				} else {
					localStorage.setItem('loginV1Onoff', false)
				}
			}
		},
		mounted() {
			//获取动态码
			// this.get_randomcode_gif()
			//判断记住密码
			this.KeepPasswords()
			//获取量子加密的url
			this.get_qss()

		},
		methods: {
			...mapActions(['set_Login_info']),
			
			
			showPwd() {
				if (this.pwdType === 'password') {
					this.pwdType = '';
				} else {
					this.pwdType = 'password';
				}
			},
			//判断记住密码
			KeepPasswords() {
				let that = this
				try {
					if (localStorage.getItem('loginV1Onoff') == "true") {
						that.checkedPass.loginV1 = true
						let arr = JSON.parse(localStorage.getItem('loginInfo'))
						if (arr) {
							that.loginForm = arr
						}
					} else {
						that.checkedPass.loginV1 = false
						that.loginForm = { //登录名登录
							loginName: '',
							password: '',
							code: '',
							codeId: '',
							image: '',
						}
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
			//获取量子加密的url
			get_qss() {
				let that = this
				that.GLOBAL.doPost(that.api.GLOBAL_qss_getByArray, {}, function(res) {
					if (res.code == 200) {
						localStorage.setItem('qssList', JSON.stringify(res.data))
					}
				})
			},
			//获取动态码
			get_randomcode_gif() {
				let that = this
				this.GLOBAL.doPost(that.api.GLOBAL_LOGIN_GIF, {}, function(res) {
					if (res.code == 200) {
						that.loginForm.image = res.data.code
						that.loginForm.codeId = res.data.id
					}
				})
			},
			//跳转到注册
			chooseRegType(e) {
				let that = this;
				console.log(JSON.stringify(e))
				if (e == 1) {
					//个人版
					that.$router.push({
						name: 'regist',
						path: '/regist/regist',
						params: {
							type: '1'
						}
					});
				} else {
					//企业版
					that.$router.push({
						name: 'regist',
						path: '/regist/regist',
						params: {
							type: '2'
						}
					});
				}
			},
			//忘记密码
			forgetPwd() {
				//跳转到修改密码页面
				let that = this
				that.$router.push({
					name: 'resetPwd',
					path: '/regist/resetPwd'
				})
			},
			//登录名登录
			handleLogin(){
				let that = this;
				that.$refs.loginForm.validate(valid => {
					if (valid) {
						let req = {
							aul_value1: that.loginForm.loginName,
							aul_value2: that.loginForm.password,
							codeId: that.loginForm.codeId,
							orgID: "",
							code: that.loginForm.code
						};
						if (that.verification.isVer) {
							
							//登陆
							that.loginURI(req)
						} else {
							that.$message({
								type: 'warning',
								message: '验证不通过'
							});
							that.verification.dialogVisible=true 
						}
				
				
					} else {
						that.$message({type: 'warning',message: '填写完整'});
						that.verification.dialogVisible=false 
						return false;
					}
				});
			},
			//加密之后登陆
			loginURI(req) {
				let that = this
				that.GLOBAL.doPost(that.api.GLOBAL_loginURI, req, function(res) {
					if (res.code == 200) { //正常请求
						console.log(that.loginForm)
						localStorage.setItem('loginInfo', JSON.stringify(that.loginForm))
						//如果登录成功就存储已登录方便后面每个页面验证
						that.set_Login_info(res.data);
						that.$router.push({
							name: 'index',
							path: '/'
						});
					} else {
						that.verification.dialogVisible=false 
						//获取动态码
						// that.get_randomcode_gif()
					}
				});
			},
			//加密之后登陆
			loginV2(req) {
				let that = this
				that.GLOBAL.doPost(that.api.GLOBAL_user_loginV2, req, function(res) {
					if (res.code == 200) { //正常请求
						//如果登录成功就存储已登录方便后面每个页面验证
						that.set_Login_info(res.data);
						that.$router.push({
							name: 'index',
							path: '/'
						});
					} else {
						that.verification.dialogVisible=false 
						//获取动态码
						// that.get_randomcode_gif()
					}
				});
			},

			//手机号码登录
			handleLogin2() {
				let that = this;
				that.$refs.phoneForm.validate(valid => {
					if (valid) {
						let req = {
							au2_value1: that.phoneForm.phone,
							au2_value2: that.phoneForm.vercode,
						};
						//登陆
						that.loginV2(req)
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			//获取手机验证码
			getVercode() {
				let that = this;
				// num 0:注册获取验证码  1:修改密码获取验证码
				let req = {
					phone: that.phoneForm.phone,
					num:0
				}
				that.GLOBAL.doPost(that.api.GLOBAL_getPhoneCode, req, function(res) {
					if (res.code == 200) {
						that.$message({
							type: 'success',
							message: res.msg
						});
						that.get_time()
					}
				})
			},
			//点击登录，弹出框
			click_login(){
				let that=this
				if(that.activeName=="first"){
					if(that.loginForm.loginName&&that.loginForm.password){
						that.verification.dialogVisible=true 
						try{
							that.$refs.mySlideVerify.reset()
						}catch(e){
							//TODO handle the exception
						}
					}else{
						that.$message({
							type: 'warning',
							message: '填写完整'
						});
					}
				}else{
					if(that.phoneForm.phone&&that.phoneForm.vercode){
						that.verification.dialogVisible=true 
						try{
							that.$refs.mySlideVerify.reset()
						}catch(e){
							//TODO handle the exception
						}
					}else{
						that.$message({
							type: 'warning',
							message: '填写完整'
						});
					}
				}
				
			},
			//倒计时
			get_time() {
				let that = this
				that.vertificationcode_num = 120
				let tmp = setInterval(() => {
					that.vertificationcode_num--
					if (that.vertificationcode_num <= 0) {
						that.vertificationcode_num = '发送验证码'
						clearInterval(tmp)
					}
				}, 1000)
			},
			//滑块验证成功
			onSuccess() {
				let that=this
				this.verification.isVer=true
				if(that.activeName=="first"){
					this.handleLogin()
				}else{
					this.handleLogin2()
				}
				
			},
			onFail() {
			},
			onRefresh() {
			}
		}
	};
</script>

<style rel="stylesheet/scss" lang="scss">
	$bg: #2d3a4b;
	$light_gray: #888;
	$assistance_color:#029789;

	/* reset element-ui css */
	.login-container {
		.el-input {
			display: inline-block;
			height: 47px;
			width: 85%;

			input {
				background: transparent;
				border: 0px;
				-webkit-appearance: none;
				border-radius: 0px;
				padding: 12px 5px 12px 15px;
				color: $light_gray;
				height: 47px;

				&:-webkit-autofill {
					// -webkit-box-shadow: 0 0 0px 1000px $light_gray inset !important;
					-webkit-text-fill-color: $light_gray !important;
				}
			}
		}

		.assistance_color {
			color: $assistance_color;
		}

		.el-button--info {
			background: $assistance_color;
		}

		.el-form-item {
			border: 1px solid rgba(255, 255, 255, 0.1);
			background: #fff;
			border-radius: 5px;
			color: #454545;
		}
	}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
	$bg: #eee;
	$dark_gray: #889aa4;
	$light_gray: #eee;

	.login-container {
		height: 100%;
		width: 100%;
		background-color: $bg;

		.login-form {
			position: absolute;
			left: 0;
			right: 0;
			width: 520px;
			max-width: 100%;
			padding: 35px 35px 15px 35px;
			margin: 120px auto;
		}

		.tips {
			font-size: 14px;
			color: #fff;
			margin-bottom: 10px;

			span {
				&:first-of-type {
					margin-right: 16px;
				}
			}
		}

		.svg-container {
			padding: 6px 5px 6px 15px;
			color: $dark_gray;
			vertical-align: middle;
			width: 30px;
			display: inline-block;
		}

		.title {
			font-size: 26px;
			font-weight: 400;
			color: $light_gray;
			margin: 0px auto 40px auto;
			text-align: center;
			font-weight: bold;
		}

		.show-pwd {
			position: absolute;
			right: 10px;
			top: 7px;
			font-size: 16px;
			color: $dark_gray;
			cursor: pointer;
			user-select: none;
		}
	}
</style>
